<template>
    <div class="page">
      <el-pagination
      v-if="total"
         :page-size="size"
         small
         :background="true"
         layout="total, prev, pager, next"
         :total="total"
         @current-change="sizeChange"
     />
    </div>
</template>

<script setup>
import {ref, watchEffect} from 'vue'

const size = ref(20)
const total = ref()

//自组件传递给父组件
const emit = defineEmits(['get-message'])

const sizeChange = (num)=>{
  console.log(num)
  //触发传递
  emit('get-message',num)
}
const props = defineProps({
    message:Number,
    messagesize:Number
})


watchEffect(()=>{
    total.value = props.message
    console.log(props.messagesize)
    if(props.messagesize){
        size.value = props.messagesize
        console.log(size.value)
    }
})

</script>

<style lang="scss" scoped>
.page{
    margin: 10px auto;
}
</style>